<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts'

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title?: string;
    subtitle?: string;
    unit?: string;
    data: any[]; // 曲线数据
    xAxisData: string[]; // x轴数据
  }>(),
  {
    width: '98%',
    height: '65vh',
    unit: '',
    data: () => [],
  }
)
// console.log('77777777', props, props.data);

const legendData = computed(() => props.data.map(item => item.typeName));
const series = computed(() => props.data.map(item => ({
  name: item.typeName,
  data: item.list,
  areaStyle: {},
  emphasis: {
    focus: 'series'
  },
  type: 'line',
  // stack: 'Total', // 加了会出现线和值对应不上情况：用了数据堆叠，当两条线相近时，后面的值会在前面一系列的值上面叠加
})))

// 折线图选项
const option = reactive({
  backgroundColor: props.bgColor,
  title: {
    text: props.title,
    subtext: props.subtitle,
    left: 'left'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: legendData,
  },
  grid: {
    borderWidth: '0',
    // left: '3%',
    // right: '4%',
    bottom: '2%',
    containLabel: true
  },
  toolbox: {
    feature: {
      show: true,
      saveAsImage: { // 下载图片
        title: '下载为图片'
      },
      restore: { title: '还原' },
      magicType: {
        type: ['line', 'bar'],
        title: { line: '切换为折线', bar: '切换为柱状图' }
      },
      dataView: { title: '数据视图', readOnly: false },
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: computed(() => props.xAxisData)
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: `{value} ${props.unit}`,
    }
  },
  series: series,
});
const { chartRef } = useEcharts({ props, option });
</script>

<template>
  <el-card class="card-nav">
    <div ref="chartRef" :style="{ height: props.height, width: props.width }"></div>
  </el-card>
</template>

<style scoped lang="scss">
.card-nav {
  height: 99%;
  overflow: auto;
}
</style>